<template>
    <div class="container">
        <header>
            <i></i><span>响响租车-中国领先的新能源共享汽车平台</span>
        </header>
        <div class="content ">
            <div class="login ">
                <p class='title'>修改密码</p>
                <ul class="box">
                    <li class='f-fix'>
                        <label class='passward f-fl'>账号</label>
                        <input type='text' placeholder='请输入账号' class='f-fl' v-model='username'>
                    </li>
                    <li class='f-fix'>
                        <label class='passward f-fl'>原密码</label>
                        <input type='password' placeholder='请输入旧密码' class='f-fl' v-model='password'>
                    </li>
                    <li class='f-fix'>
                        <label class='passward f-fl'>验证码</label>
                        <input type='text' placeholder='请输入验证码' class='f-fl code' v-model='code'>
                        <a class="min-btn" :class="(isFetch||!username)?'no':''" @click="getCode">{{codeText}}</a>
                    </li>
                    <li class='f-fix'>
                        <label class='account f-fl'>新密码</label>
                        <input type='password' placeholder='请输入6～16位字符' minlength="6" maxlength="16" onkeyup=""  class='f-fl' v-model='pwd_new'>
                    </li>

                    <li class='f-fix'>
                        <label class='passward f-fl'>确认新密码</label>
                        <input type='password' placeholder='请在此输入新密码' minlength="6" maxlength="16" onkeyup=""  class='f-fl' v-model='pwd_confirm'>
                    </li>
                    <div class="f-fix tip-area" v-if="tip">
                        {{tip}}
                    </div>
                    <li class='f-fix'>
                        <label class='passward f-fl'></label>
                        <a class='f-fl btn'  :class="(username&&password&&code&&pwd_new&&pwd_confirm)?'active':''" @click='submit'>确定</a>
                    </li>

                </ul>

            </div>

        </div>
        <div class="foot">
            <div class="footcontent">
                <div class='corporation f-fl'>© 广州市宝奕瀛新汽车有限责任公司</div>
            </div>
        </div>
    </div>
</template>
<script>
    let timer
    export default{
        data(){
            return{
                username:'',
                password:'',
                code:'',
                codeText:'获取验证码',
                isFetch:false,
                second:60,
                tip:'',
                pwd_new:'',
                pwd_confirm:'',
            }
        },
        watch:{
             username(val){
                 if(val) this.tip=''
             },
            password(val){
                if(val) this.tip=''
            },
            code(val){
                if(val) this.tip=''
            },
            pwd_new(val){
                if(val) this.tip=''
            },
            pwd_confirm(val){
                if(val) this.tip=''
            },
        },
        methods:{
            setCookie(name,value,days){
                name=escape(name)
                value=escape(value)
                var expires=new Date()
                expires.setTime(expires.getTime()+days*3600000*24)
                document.cookie=name+"="+value+";expires="+ expires.toUTCString()
            },
            deleteCookie(name){
                this.setCookie(name,'',-1)
            },
            getCode(){
                if(!this.username){
                    return
                }
                if(this.isFetch) return
                this.second=60
                this.isFetch=true
                clearInterval(timer)
//                this.codeText=this.second+'s重新获取'
                this.$http.get('super_user/modify_pwd_mobile_code',{
                    user_name:this.username
                }).then(res=>{
                    if(!res.result){
                        timer=setInterval(()=>{
                            this.second--
                            this.codeText=this.second+'s重新获取'
                            if(this.second<=0){
                                clearInterval(timer)
                                this.isFetch=false
                                this.codeText='获取验证码'
                            }
                        },1000)
                    }else{
                        this.tip=res.msg
                        this.isFetch=false
                        this.codeText='获取验证码'
                        return
                    }
                })
            },
            submit(){
                if(!this.username){
//                   this.tip='请先输入账号'
                    return
                }
                if(!this.password){
//                   this.tip='请先输入密码'
                    return
                }
                if(!this.code){
//                   this.tip='请先输入验证码'
                    return
                }
                if(!this.pwd_new){
                    return
                }
                if(!this.pwd_confirm){
                    return
                }
//                this.tip=''
                this.$http.post('super_user/modify_pwd',{
                    user_name:this.username,
                    old_pwd:this.password,
                    new_pwd:this.pwd_new,
                    pwd_confirm:this.pwd_confirm,
                    mobile_code:this.code
                }).then(res=>{
                    if(!res.result){
                        this.deleteCookie('admin_username')
                        this.deleteCookie('admin_password')
                        this.deleteCookie('admin_isRemember')
                        localStorage.removeItem('rights_manage_web_token')
                        window.location.href='login.html?from=out'
                    }else{
                        this.tip=res.msg
                        return
                    }
                })
            }
        },
    }
</script>
<style lang="scss" scoped>
    .container {
        width:900px;
        position:relative;
        margin:0 auto;
        top:50%;
        height:580px;
        transform:translateY(-50%);
    header{
        position:relative;
        height:60px;
        line-height: 60px;
        top: -10px;
    i{
        vertical-align: middle;
        display:inline-block;
        width:40px;
        height:40px;
        background:url(./img/logo-new.png) center no-repeat;
    }
    span{
        margin-left:10px;
        font-size: 20px;
        color: #3B4144;
    }
    }

    .content{
        width: 900px;
        height: 488px;
        background: #FFFFFF;
        border: 1px solid #DDDDDD;
        z-index: 100;
        margin:0 auto;
    .tip-area{
        height:20px;
        line-height:20px;
        margin-left:200px;
        color: #E33244;
        font-size:12px;
    }
    .login{
        width: 900px;
    .title{
        width: 900px;
        height: 44px;
        line-height: 44px;

        font-size: 18px;
        color: #333333;
        border-bottom:1px solid #DDDDDD;
        text-indent: 20px;
    }
    ul{
        width: 900px;
        margin-top:40px;
    li{
        margin-top:20px;
    label{
        width: 180px;
        height: 46px;
        line-height: 46px;
        text-align:right;

        font-size: 16px;
        color: #333333;
        margin-right:20px;
    }
    .min-btn{
        display:inline-block;
        color:#fff;
        font-size:12px;
        text-align: center;
        width:120px;
        height:42px;
        margin-left:10px;
        line-height:42px;
        border-radius:2px;
        background: #0085EE;
    &.no{
         background:#ddd;
     }

    }
    input{
        width: 340px;
        height: 40px;
        background: #FFFFFF;
        border: 1px solid #CFD0D0;
        text-indent: 20px;
    }
    .code{
        width:208px;
    }
    .btn{
        background:#ddd;
        border-radius: 4px;
        width: 200px;
        height: 46px;
        line-height:46px;
        font-size: 20px;
        text-align: center;
        color: #FFFFFF;
        &.active{
             background:#0085EE;
         }
    }
    }
    }
    }

    }
    .foot{
        width: 900px;
        height: 100px;
    .footcontent{
        width: 900px;
        margin: 17px auto;

        font-size: 12px;
        color: #474747;

    }
    }
    }

</style>